<template>

  <div class = "app-container">
    <div style="margin-left: 70px">
      <el-select @change="getSaddr(masterlist.maddr)" v-model="masterlist.maddr"  placeholder="请选择网关" >
        <el-option
          v-for="item in masterlist"
          :key="item.id"
          :label="item.maddr"
          :value="item.maddr">
        </el-option>
      </el-select>

      <el-select @change="sachange(devicelist.saddr)" v-model="devicelist.saddr"  placeholder="请选择设备" >
        <el-option
          v-for="item in devicelist"
          :key="item.id"
          :label="item.saddr"
          :value="item.saddr">
        </el-option>
      </el-select>

      <div class="block" style="display: inline-block">
<!--        <span class="demonstration">带快捷选项</span>-->
        <el-date-picker
          v-model="dateval"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy/M/dd HH:mm:ss"
          value-format="yyyy/M/dd HH:mm:ss"

          align="right">
        </el-date-picker>
      </div>

      <el-button type="primary" icon="el-icon-search" @click="getEcharts">查询</el-button>
      <!--    <el-button type="primary" @click="openData">展示数据</el-button>-->
    </div>
    <br>
    <!-- 统计图容器 -->
    <div id="myChart" style="position:relative;width: 100%;height:800px" />
  </div>
</template>

<script>
  import { master,getDevice } from '@/api/master'
  import { mmslaveList} from '@/api/device'

  import { getline } from '@/api/line'
  import device from '../table/device'
  export default {
    name: 'DynamicLineChart',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dateval: '',

        // 实时数据数组
        dataline:[],
        date: [],
        yieldRate: [],
        yieldIndex: [],
        masterlist:[],
        devicelist: [],
        selmaddr: '',
        selsaddr: '',


        // 折线图echarts初始化选项
        echartsOption: {
          legend: {
            data: ['温度', '湿度'],
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {                //设置x轴
            name: '时间',
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 18
            },
            type: 'category',
            boundaryGap: false,
            data: this.date// 绑定实时数据数组
          },
          yAxis: {
            name: '温度℃/湿度PH%',
            nameTextStyle: {
              color: '#553AC2',
              fontSize: 16,
              padding: [0, 0, 10, 0]
            },
            axisLine: {
              lineStyle: {
                color: '#000000',
              }
            },
            type: 'value',
            min: 0,
            max: 90,
            interval:10,
            axisLabel: {
              interval: 'auto',
              formatter: '{value}'
            }
          },
          series: [
            {
              name: '温度',
              data:this.yieldRate,
              type: 'line',               // 类型为折线图
              lineStyle: {                // 线条样式 => 必须使用normal属性
                normal: {
                  color: '#409EFF',
                }
              },
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },

            },

            {
              name: '湿度',
              data: this.yieldIndex,
              type: 'line',
              lineStyle: {
                normal: {
                  color: '#E6A23C',
                }
              },
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
            }
          ]
        }
      }
    },
    mounted() {
      var echarts = require('echarts')

      this.myChart = echarts.init(document.getElementById('myChart'), 'light');	// 初始化echarts, theme为light
      this.myChart.setOption(this.echartsOption);	// echarts设置初始化选项
      console.log("echarts版本" + echarts.version);

      this.addData("01", "03","2021/5/13 11:04:51 2021/5/13 11:30:51");
      this.allmaster()

    },
    methods: {
      async addData(maddr,saddr,dateval) {

        dateval = (dateval.toString()).replace(/,/g, " ");//取消字符串中出现的所有逗号
        console.log("@@  " + dateval)

        const { data } = await getline(maddr,saddr,dateval)

        this.dataline = data
        this.yieldRate=this.dataline.T;
        this.yieldIndex=this.dataline.H;
        this.date = this.dataline.time;

        // 重新将数组赋值给echarts选项
        this.echartsOption.xAxis.data = this.date;
        this.echartsOption.series[0].data = this.yieldRate;
        this.echartsOption.series[1].data = this.yieldIndex;

        this.myChart.setOption(this.echartsOption);
      },
      async allmaster() {
        const { data } = await master()
        this.masterlist = data

      },
      async getSaddr(maddr){
        this.selmaddr = maddr
        const {data} = await mmslaveList(maddr)
        this.devicelist = data
      },
      sachange(saddr){
        this.selsaddr =saddr;
      },
      async getEcharts(){

        if (this.selsaddr == "") {
          this.$message.warning("查询条件不能为空！");
          return;
        }
        this.dataline = []


        //每次手动将数据置空,因为会出现多次点击搜索情况
        this.addData(this.selmaddr,this.selsaddr,this.dateval)
      }
    }
  }
</script>

<style scoped>


</style>
